<template>
  <div class="content">
    <div class="product_info">
      <img :src="imgBaseUrl+orderDetail.ico" alt />
      <div>
        <p>{{orderDetail.title}}</p>
        <span>￥{{orderDetail.payPrice?orderDetail.payPrice:orderDetail.oPrice}}</span>
      </div>
    </div>
    <div class="warn" v-if="ConfirmCode&&ConfirmCode[0]&&ConfirmCode[0][4]">
      <p>温馨提示：如无法打开链接，请切换4G流量并复制链接到微信或者浏览器打开。</p>
    </div>
    <div class="coupon">
      <van-collapse v-for="(item,index) in ConfirmCode" :key="index" v-model="activeNames">
        <van-collapse-item :title="'电子券'+(index+1)" :name="index">
          <div class="info">
            <div v-if="item[1]">
              <!-- <p class="writeOffCode">核销码</p> -->
              <!-- <p class="code">{{item[1]}}</p> -->
              <!-- 将获取到的信息画到画布上 -->
              <!-- <canvas id="canvas"></canvas> -->
              <p>
                核销码：
                <span>{{item[1]}}</span>
              </p>
              <span
                class="btn"
                v-clipboard:copy="item[1]"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >复制</span>
            </div>
            <div v-if="item[2]">
              <p>
                卡号：
                <span>{{item[2].split(';')[0]}}</span>
              </p>
              <span
                class="btn"
                v-clipboard:copy="item[2].split(';')[0]"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >复制</span>
            </div>
            <div v-if="item[2]||item[3]">
              <p>
                卡密：
                <span>{{item[2]?item[2].split(';')[1]:item[3]}}</span>
              </p>
              <span
                class="btn"
                v-clipboard:copy="item[2]?item[2].split(';')[1]:item[3]"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >复制</span>
            </div>
            <div v-if="item[4]">
              <p>
                短链：
                <span>{{item[4]}}</span>
              </p>
              <span class="btn" @click="linkTo(item[4])">打开连接</span>
            </div>
            <div v-if="item[5]" style="flex-direction: column;height:80px;ali">
              <div style="width:100%">
                <p>
                  卡密：
                  <span>{{item[5]?item[5].split(';')[0]:''}}</span>
                </p>
                <span
                  class="btn"
                  v-clipboard:copy="item[5]?item[5].split(';')[0]:''"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                >复制</span>
              </div>
              <div style="width:100%">
                <p>
                  短链：
                  <span>{{item[5].split(';')[1]}}</span>
                </p>
                <span class="btn" @click="linkTo(item[5].split(';')[1])">打开连接</span>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="qrcode" v-show="codema">
        <p class="writeOffCode">核销二维码</p>
        <canvas id="canvas"></canvas>
      </div>
    </div>
    <div class="order_info">
      <p class="title">订单信息</p>
      <div>
        <p>
          <span>订单编号</span>：
          <span>{{orderDetail.shopOrderNo}}</span>
        </p>
        <p>
          <span>购买手机号</span>：
          <span>{{orderDetail.telphone}}</span>
        </p>
        <p>
          <span>下单时间</span>：
          <span>{{orderDetail.createTime}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog, Collapse, CollapseItem } from 'vant';
import { imgBaseUrl } from '@/config/env';
import QRCode from 'qrcode';
// 引入qrcode
export default {
  data() {
    return {
      imgBaseUrl,
      activeNames: [0],
      id: '',
      orderDetail: {},
      ConfirmCode: [],
      codema: false
    };
  },
  components: {
    'van-collapse': Collapse,
    'van-collapse-item': CollapseItem
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.getDetail();
    this.getConfirmCode();
  },
  methods: {
    useqrcode(val) {
      var canvas = document.getElementById('canvas');
      QRCode.toCanvas(
        canvas,
        val,
        {
          scale: 6,
          height: 200,
          wight: 200
        },
        function(error) {
          if (error) console.error(error);
          console.log('success!');
        }
      );
    },
    linkTo(url) {
      window.location.href = url;
    },
    onCopy() {
      Toast('复制成功');
    },
    onError() {
      Toast('复制失败');
    },
    getDetail() {
      this.$http.post('/order/detail', { orderId: this.id }).then(res => {
        // console.log(res);
        if (res.data.code === '0') {
          this.orderDetail = res.data.object;
        } else {
          Dialog.alert({
            title: '提示',
            message: '获取产品信息失败'
          }).then(() => {
            this.$router.go(-1);
          });
        }
      });
    },
    getConfirmCode() {
      this.$http
        .post('/order/getOrderConfirmCode', {
          orderId: this.id
        })
        .then(res => {
          if (res.data.code === '0') {
            this.ConfirmCode = res.data.object;
            res.data.object.map(item => {
              if (item[1]) {
                this.codema = true;
                this.useqrcode(item[1]);
              }
            });
          } else {
            Dialog.alert({
              title: '提示',
              message: res.data.message
            });
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.qrcode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 20px 0;
  margin-bottom: 32px;
}
.writeOffCode {
  font-size: 32px;
  color: #080808;
  text-align: center;
}
#canvas {
  width: 200px;
  height: 200px;
}
.content {
  .product_info {
    background-color: white;
    display: flex;
    align-items: cente;
    justify-content: flex-start;
    padding: 20px;
    img {
      width: 200px;
      min-width: 200px;
      height: 200px;
      display: block;
      border-radius: 8px;
      background-color: red;
      margin-right: 20px;
    }
    div {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: column;
      padding: 20px 0;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 30px;
      }
      span {
        color: red;
        font-size: 36px;
      }
    }
  }
  .warn {
    // background-color: white;
    padding: 20px 20px 0px;
    font-size: 24px;
    color: red;
  }
  .coupon,
  .order_info {
    background-color: white;
    padding: 20px;
    margin-top: 30px;
    p.title {
      height: 88px;
      border-bottom: 1px solid #ebebeb;
      color: #7f7d7d;
      font-size: 30px;
      line-height: 88px;
    }
    .info {
      div {
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // flex-direction: column;
        p {
          font-size: 28px;
          color: #7f7d7d;
          display: flex;
          align-items: center;
          span {
            // color: black;
            width: 400px;
            word-break: break-all;
          }
        }
        span.btn {
          text-align: center;
          line-height: 30px;
          background-color: #28b46a;
          border-radius: 8px;
          color: white;
          padding: 10px 20px;
        }
      }
    }
  }
  .coupon {
    padding: 0;
  }
  .order_info {
    div {
      p {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 80px;
        font-size: 28px;
        span:nth-child(1) {
          display: block;
          color: #7f7d7d;
          width: 160px;
          text-align: justify;
          text-align-last: justify;
        }
      }
    }
  }
}
</style>
